<Infrastructure:VisualStateAwarePage x:Name="pageRoot"
                                     x:Class="AdventureWorks.Shopper.Views.ItemDetailPage"
                                     IsTabStop="false"
                                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                                     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                                     xmlns:designViewModels="using:AdventureWorks.Shopper.DesignViewModels"
                                     xmlns:views="using:AdventureWorks.Shopper.Views"
                                     xmlns:Infrastructure="using:Microsoft.Practices.Prism.StoreApps"
                                     Infrastructure:ViewModelLocator.AutoWireViewModel="true"
                                     x:Uid="Page"
                                     mc:Ignorable="d"
                                     d:DataContext="{d:DesignInstance designViewModels:ItemDetailsPageDesignViewModel, IsDesignTimeCreatable=True}">

    <Page.TopAppBar>
        <AppBar Style="{StaticResource AppBarStyle}"
                x:Uid="TopAppBar">
            <views:TopAppBarUserControl />
        </AppBar>
    </Page.TopAppBar>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">

        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton"
                    AutomationProperties.AutomationId="ItemDetailsPageBackButton"
                    Command="{Binding GoBackCommand, ElementName=pageRoot}"
                    Style="{StaticResource BackButtonStyle}" />
            <TextBlock x:Name="pageTitle"
                       x:Uid="ProductInformationTitle"
                       Text="Product Details"
                       Style="{StaticResource PageHeaderTextStyle}"
                       Grid.Column="1" />
            <views:SearchUserControl x:Name="searchUserControl"
                                     Grid.Column="2"
                                     Margin="15,15,0,15" />
            <views:ShoppingCartTabUserControl x:Name="shoppingCartTabUserControl"
                                              Grid.Column="3"
                                              Margin="15"
                                              RenderTransformOrigin="0.5,0.5"
                                              Loaded="StartLayoutUpdates"
                                              Unloaded="StopLayoutUpdates">
                <views:ShoppingCartTabUserControl.RenderTransform>
                    <CompositeTransform />
                </views:ShoppingCartTabUserControl.RenderTransform>
            </views:ShoppingCartTabUserControl>
        </Grid>

        <!--
            The remainder of the page is one large FlipView that displays details for
            one item at a time, allowing the user to flip through all items in the chosen
            group
        -->
        <FlipView x:Name="flipView"
                  AutomationProperties.AutomationId="ItemsFlipView"
                  AutomationProperties.Name="Item Details"
                  TabIndex="1"
                  Grid.Row="1"
                  ItemsSource="{Binding Items}"
                  SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"
                  SelectedItem="{Binding SelectedProduct, Mode=TwoWay}">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <!--
                        UserControl chosen as the templated item because it supports visual state management
                        Loaded/unloaded events explicitly subscribe to view state updates from the page
                    -->
                    <UserControl Loaded="StartLayoutUpdates"
                                 Unloaded="StopLayoutUpdates">
                        <ScrollViewer x:Name="scrollViewer"
                                      Grid.Row="1"
                                      Padding="120,0,0,50"
                                      ZoomMode="Disabled"
                                      VerticalScrollBarVisibility="Auto"
                                      HorizontalScrollBarVisibility="Auto">
                            <Grid x:Name="mainGrid">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid x:Name="grid1"
                                      Column="0"
                                      HorizontalAlignment="Stretch">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <TextBlock x:Uid="OverviewLabel"
                                               x:Name="OverviewLabel"
                                               Grid.Row="0"
                                               Style="{StaticResource GroupHeaderTextStyle}"
                                               Foreground="{StaticResource AWShopperAccentBrush}"
                                               Text="Overview" />
                                    <Image Grid.Row="1"
                                           x:Name="ProductImage"
                                           Width="320"
                                           MaxHeight="400"
                                           Margin="0,30,0,0"
                                           Source="{Binding Image}"
                                           Stretch="Uniform" />
                                    <Button x:Name="addToCartButton"
                                            Grid.Row="2"
                                            x:Uid="AddToCartButton"
                                            AutomationProperties.AutomationId="AddToCartButton"
                                            Content="Add to Cart"
                                            Command="{Binding AddToCartCommand}"
                                            Background="{StaticResource AWShopperAccentBrush}"
                                            Margin="0,10,0,0"
                                            HorizontalAlignment="Stretch" />
                                </Grid>
                                <Grid x:Name="grid2"
                                      Column="1"
                                      Width="320"
                                      HorizontalAlignment="Stretch"
                                      Margin="40,0,0,0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <TextBlock Grid.Row="0"
                                               Text="{Binding Title}"
                                               MaxHeight="160"
                                               Margin="0,60,10,0"
                                               FontSize="24"
                                               TextWrapping="Wrap"
                                               TextTrimming="WordEllipsis" />
                                    <StackPanel Grid.Row="1" Orientation="Horizontal"
                                                Margin="0,15,10,0">
                                        <TextBlock x:Uid="InventoryStatusLabel"
                                                   Text="Inventory Status:"
                                                   FontSize="16" />
                                        <TextBlock Text="In Stock"
                                                   FontSize="16"
                                                   Margin="10,0" />
                                    </StackPanel>
                                    <TextBlock x:Uid="SalePriceLabel"
                                               Grid.Row="2"
                                               Text="Sale Price"
                                               Margin="0,10,10,0"
                                               FontSize="16" />
                                    <TextBlock Grid.Row="3"
                                               Text="{Binding SalePrice}"
                                               FontWeight="ExtraBold"
                                               Margin="0,5,5,0"
                                               FontSize="48" />
                                    <StackPanel Grid.Row="4"
                                                Margin="0,5,10,10">
                                        <TextBlock x:Uid="ReviewsLabel"
                                                   Text="12 Reviews:"
                                                   FontSize="16"
                                                   Margin="0,0,0,10" />
                                        <TextBlock Text=""
                                                   FontFamily="Segoe UI Symbol"
                                                   Foreground="Yellow"
                                                   FontSize="20"></TextBlock>
                                    </StackPanel>
                                    <TextBlock x:Name="textBlock2"
                                               Grid.Row="5"
                                               Text="{Binding Description}"
                                               MaxHeight="220"
                                               Margin="0,15,10,10"
                                               FontSize="16"
                                               TextWrapping="Wrap"
                                               TextTrimming="WordEllipsis" />
                                </Grid>
                                <Grid x:Name="grid3"
                                      Column="2"
                                      Width="450"
                                      Margin="40,0,0,0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <TextBlock x:Uid="DetailsLabel"
                                               x:Name="DetailsLabel"
                                               Grid.Row="0"
                                               Style="{StaticResource GroupHeaderTextStyle}"
                                               Foreground="{StaticResource AWShopperAccentBrush}"
                                               Text="Details" />
                                    <Grid x:Name="DetailsGrid"
                                          Grid.Row="1"
                                          Margin="0,20,10,10">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="120" />
                                            <ColumnDefinition />
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <TextBlock Grid.Row="0"
                                                   Grid.ColumnSpan="2"
                                                   FontSize="24"
                                                   Margin="0,10"
                                                   Text="Vivamus Sagittis Lacus" />
                                        <TextBlock Grid.Row="1"
                                                   Grid.Column="0"
                                                   FontSize="16"
                                                   Margin="0,5,10,5"
                                                   Foreground="{StaticResource AWShopperItemForegroundBrush}"
                                                   Text="Ridiculus" />
                                        <TextBlock Grid.Row="1"
                                                   Grid.Column="1"
                                                   FontSize="16"
                                                   Margin="10,5,10,5"
                                                   Text="Ridiculus"
                                                   TextWrapping="Wrap" />
                                        <TextBlock Grid.Row="2"
                                                   Grid.Column="0"
                                                   FontSize="16"
                                                   Margin="0,5,10,5"
                                                   Foreground="{StaticResource AWShopperItemForegroundBrush}"
                                                   Text="Pallentesque" />
                                        <TextBlock Grid.Row="2"
                                                   Grid.Column="1"
                                                   FontSize="16"
                                                   Margin="10,5,10,5"
                                                   Text="Mattis Cras Euismod Nibh"
                                                   TextWrapping="Wrap" />
                                        <TextBlock Grid.Row="3"
                                                   Grid.Column="0"
                                                   FontSize="16"
                                                   Margin="0,5,10,5"
                                                   Foreground="{StaticResource AWShopperItemForegroundBrush}"
                                                   Text="Sit" />
                                        <TextBlock Grid.Row="3"
                                                   Grid.Column="1"
                                                   FontSize="16"
                                                   Margin="10,5,10,5"
                                                   Text="Amet Malesuada Euismod Egestas Fusce"
                                                   TextWrapping="Wrap" />
                                        <TextBlock Grid.Row="4"
                                                   Grid.Column="0"
                                                   FontSize="16"
                                                   Margin="0,5,10,5"
                                                   Foreground="{StaticResource AWShopperItemForegroundBrush}"
                                                   Text="Commodo" />
                                        <TextBlock Grid.Row="4"
                                                   Grid.Column="1"
                                                   FontSize="16"
                                                   Margin="10,5,10,5"
                                                   Text="Commodo"
                                                   TextWrapping="Wrap" />
                                        <TextBlock Grid.Row="5"
                                                   Grid.Column="0"
                                                   FontSize="16"
                                                   Margin="0,5,10,5"
                                                   Foreground="{StaticResource AWShopperItemForegroundBrush}"
                                                   Text="Purus" />
                                        <TextBlock Grid.Row="5"
                                                   Grid.Column="1"
                                                   FontSize="16"
                                                   Margin="10,5,10,5"
                                                   Text="Ridiculus Amet Malesuada Euismod Egestas"
                                                   TextWrapping="Wrap" />
                                        <TextBlock Grid.Row="6"
                                                   Grid.Column="0"
                                                   FontSize="16"
                                                   Margin="0,5,10,5"
                                                   Foreground="{StaticResource AWShopperItemForegroundBrush}"
                                                   Text="Amet" />
                                        <TextBlock Grid.Row="6"
                                                   Grid.Column="1"
                                                   FontSize="16"
                                                   Margin="10,5,10,5"
                                                   Text="3453453"
                                                   TextWrapping="Wrap" />
                                        <TextBlock Grid.Row="7"
                                                   Grid.Column="0"
                                                   FontSize="16"
                                                   Margin="0,5,10,5"
                                                   Foreground="{StaticResource AWShopperItemForegroundBrush}"
                                                   Text="Vestibulum" />
                                        <TextBlock Grid.Row="7"
                                                   Grid.Column="1"
                                                   FontSize="16"
                                                   Margin="10,5,10,5"
                                                   Text="Commodo"
                                                   TextWrapping="Wrap" />
                                        <TextBlock Grid.Row="8"
                                                   Grid.Column="0"
                                                   FontSize="16"
                                                   Margin="0,5,10,5"
                                                   Foreground="{StaticResource AWShopperItemForegroundBrush}"
                                                   Text="Mollis" />
                                        <TextBlock Grid.Row="8"
                                                   Grid.Column="1"
                                                   FontSize="16"
                                                   Margin="10,5,10,5"
                                                   Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in massa turpis, ut fringilla quam. Vivamus mattis, mi in porta consequat, augue nunc volutpat ante, sed rhoncus ligula ante sed erat."
                                                   TextWrapping="Wrap" />
                                        <TextBlock Grid.Row="9"
                                                   Grid.ColumnSpan="2"
                                                   FontSize="24"
                                                   Margin="0,10"
                                                   Text="Ullamcorper Fermentum" />
                                        <TextBlock Grid.Row="10"
                                                   Grid.Column="0"
                                                   FontSize="16"
                                                   Margin="0,5,10,5"
                                                   Foreground="{StaticResource AWShopperItemForegroundBrush}"
                                                   Text="Ridiculus" />
                                        <TextBlock Grid.Row="10"
                                                   Grid.Column="1"
                                                   FontSize="16"
                                                   Margin="10,5,10,5"
                                                   Text="Ridiculus"
                                                   TextWrapping="Wrap" />
                                        <TextBlock Grid.Row="11"
                                                   Grid.Column="0"
                                                   FontSize="16"
                                                   Margin="0,5,10,5"
                                                   Foreground="{StaticResource AWShopperItemForegroundBrush}"
                                                   Text="Pallentesque" />
                                        <TextBlock Grid.Row="11"
                                                   Grid.Column="1"
                                                   FontSize="16"
                                                   Margin="10,5,10,5"
                                                   Text="Mattis Cras Euismod Nibh"
                                                   TextWrapping="Wrap" />

                                    </Grid>
                                </Grid>
                            </Grid>
                            <VisualStateManager.VisualStateGroups>

                                <!-- Visual states reflect the application's view state inside the FlipView -->
                                <VisualStateGroup x:Name="ApplicationViewStates">
                                    <VisualState x:Name="DefaultLayout" />
                                    <VisualState x:Name="PortraitLayout">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.Padding)"
                                                                           Storyboard.TargetName="scrollViewer">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Thickness>95,0,0,0</Thickness>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                                           Storyboard.TargetName="grid2">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <x:Int32>1</x:Int32>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)"
                                                                           Storyboard.TargetName="grid2">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <x:Int32>0</x:Int32>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                                           Storyboard.TargetName="grid3">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <x:Int32>2</x:Int32>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)"
                                                                           Storyboard.TargetName="grid3">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <x:Int32>0</x:Int32>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
                                                                           Storyboard.TargetName="grid2">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Thickness>0</Thickness>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
                                                                           Storyboard.TargetName="grid3">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Thickness>0</Thickness>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid3">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <x:Double>NaN</x:Double>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="textBlock2">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <x:Double>380</x:Double>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid2">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <x:Double>NaN</x:Double>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="grid3">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <HorizontalAlignment>Left</HorizontalAlignment>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="grid3">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <x:Double>400</x:Double>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="textBlock2">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <HorizontalAlignment>Left</HorizontalAlignment>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="addToCartButton">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Thickness>10,10,10,0</Thickness>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="ProductImage">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <x:Double>360</x:Double>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MinimalLayout">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
                                                                           Storyboard.TargetName="mainGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Thickness>20,0,0,60</Thickness>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)"
                                                                           Storyboard.TargetName="grid1">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <x:Double>NaN</x:Double>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)"
                                                                           Storyboard.TargetName="grid2">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <x:Double>260</x:Double>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                                           Storyboard.TargetName="grid2">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <x:Int32>1</x:Int32>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)"
                                                                           Storyboard.TargetName="grid2">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <x:Int32>0</x:Int32>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
                                                                           Storyboard.TargetName="grid2">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Thickness>0,0,0,0</Thickness>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)"
                                                                           Storyboard.TargetName="grid3">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <x:Double>260</x:Double>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                                           Storyboard.TargetName="grid3">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <x:Int32>3</x:Int32>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)"
                                                                           Storyboard.TargetName="grid3">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <x:Int32>0</x:Int32>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
                                                                           Storyboard.TargetName="grid3">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Thickness>0</Thickness>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)"
                                                                           Storyboard.TargetName="ProductImage">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <x:Double>260</x:Double>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)"
                                                                           Storyboard.TargetName="ProductImage">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <x:Double>260</x:Double>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.Padding)"
                                                                           Storyboard.TargetName="scrollViewer">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Thickness>0</Thickness>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ScrollViewer.VerticalScrollMode)"
                                                                           Storyboard.TargetName="scrollViewer">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <ScrollMode>Enabled</ScrollMode>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ScrollViewer.HorizontalScrollMode)"
                                                                           Storyboard.TargetName="scrollViewer">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <ScrollMode>Disabled</ScrollMode>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ScrollViewer.HorizontalScrollBarVisibility)" Storyboard.TargetName="scrollViewer">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <ScrollBarVisibility>Hidden</ScrollBarVisibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
                                                                           Storyboard.TargetName="DetailsGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Thickness>0,20,0,10</Thickness>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </ScrollViewer>
                    </UserControl>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="DefaultLayout" />

                <!-- The back button respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="PortraitLayout">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource PortraitBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource MinimalPageHeaderTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>

                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when in minimal layout -->
                <VisualState x:Name="MinimalLayout">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipView"
                                                       Storyboard.TargetProperty="ItemsPanel">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource VerticalStackPanelItemsPanel}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource MinimalBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource MinimalPageHeaderTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
                                                       Storyboard.TargetName="shoppingCartTabUserControl">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>0,37,-20,0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
                                                       Storyboard.TargetName="pageTitle">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>0,0,0,40</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="searchUserControl">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>

    <!-- AppBar -->
    <Page.BottomAppBar>
        <CommandBar Style="{StaticResource AppBarStyle}"
                AutomationProperties.AutomationId="BottomAppBar"
                x:Uid="BottomAppBar"
                IsSticky="{Binding IsBottomAppBarSticky, Mode=TwoWay}"
                IsOpen="{Binding IsBottomAppBarOpened, Mode=TwoWay}">
            <CommandBar.SecondaryCommands>
                <AppBarButton  x:Name="PinAppBarButton"
                            x:Uid="PinAppBarButton"
                            AutomationProperties.AutomationId="PinAppBarButton"
                            Label="Pin to Start"
                            Icon="Pin"
                            Visibility="{Binding IsSelectedProductPinned, Converter={StaticResource BooleanNegationToVisibilityConverter}}"
                            Command="{Binding PinProductCommand}"/>
                <AppBarButton x:Name="UnpinAppBarButton"
                            x:Uid="UnpinAppBarButton"
                            AutomationProperties.AutomationId="UnpinAppBarButton"
                            Label="Unpin from Start"
                            Icon="UnPin"
                            Visibility="{Binding IsSelectedProductPinned, Converter={StaticResource BooleanToVisibilityConverter}}"
                            Command="{Binding UnpinProductCommand}"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>

</Infrastructure:VisualStateAwarePage>
